import React, { Component } from 'react';
import styles from './index.less';
import { Empty, Button } from 'antd';
import { OnLoadAmap } from '#/utils/interactive';
import { visualMaps } from './VisualMap.js';
import { visualMaps3D } from './VisualMap3D.js';
import dark_error from './img_dark_error.png';
import PropTypes from 'prop-types';
import emitter from '#/utils/events';

class VisualMap extends Component {
  visualMapRef = React.createRef();
  constructor(props) {
    super(props);
    this.state = {
      isShowVisualMap: true, // 地图是否加载成功
    };
  }

  componentDidMount() {
    this.onLoad();
  }

  getVisualMapRef = (type = '') => {
    if (type === '3D') return visualMaps3D;
    return visualMaps;
  };

  onLoad = async () => {
    let isShowVisualMap;
    if (this.props?.viewMode === '2D') {
      await visualMaps.setDefaultVisualMapData(this.props || {});
      isShowVisualMap = visualMaps.onLoad(this.props.AMapClick || null);
    } else if (this.props?.viewMode === '3D') {
      await visualMaps3D.setDefaultVisualMapData(this.props || {});
      isShowVisualMap = visualMaps3D.onLoad();
    }
    this.setState({
      isShowVisualMap,
    });
  };

  // 点击地图
  AMapClick = () => {
    visualMaps?.visualMap?.clearInfoWindow();
    // visualMaps?.setFitViewFun();
  };

  // 更新点标记
  upDataMarkers = (slide = {}) => {
    visualMaps.upDataMarkersAttribute(slide);
  };

  // 更新聚合点
  upDataPolymerization = (slide = {}) => {
    visualMaps.setPolymerization(slide);
  };

  setCenter = (lnglat = [], obj = {}) => {
    visualMaps?.visualMap && visualMaps?.visualMap?.setCenter(lnglat);
    if (obj?.click)
      emitter.emit('visualMapData', {
        bounds: visualMaps?.visualMap && visualMaps?.visualMap?.getBounds(),
      });
  };

  // 更新可视区域
  setFitView = (list = []) => {
    visualMaps.setFitViewFun({}, list);
  };

  // 更新一个点标记 （资产管理大屏）
  upData = ({ str = '', type = '', allData = {} }) => {
    if (this.props?.viewMode === '2D') {
      let markersAttribute =
        this.props.subComponents?.filter((_s) => _s?.name === 'markersAttribute')[0] || {};
      if (type === 'asset' || (type === 'dept' && !str)) {
        markersAttribute.data = [].concat(
          markersAttribute?.data || [],
          Object.values(allData || {})?.filter((_a) => _a?.projectType === '集控'),
        );
      } else if (type === 'dept' && str === '集控') {
        markersAttribute.data = Object.values(allData || {})?.filter(
          (_a) => _a?.projectType === '集控',
        );
      }
      visualMaps.setMarkersAttribute(markersAttribute);
    }
  };

  setZoom = (data = {}) => {
    if (this.props?.viewMode === '2D') {
      if (visualMaps?.visualMap) {
        let zoom = visualMaps?.visualMap?.getZoom();
        zoom += data?.type === 'Enlarge' ? 0.3 : -0.3;
        visualMaps?.visualMap?.setZoom(zoom);
        visualMaps?.visualMap?.clearInfoWindow();
      }
    } else if (this.props?.viewMode === '3D') {
      if (visualMaps3D?.visualMap) {
        let zoom = visualMaps3D?.visualMap?.getZoom();
        zoom += data?.type === 'Enlarge' ? 0.3 : -0.3;
        visualMaps3D?.visualMap?.setZoom(zoom);
        visualMaps3D?.visualMap?.clearInfoWindow();
      }
    }
  };

  upDateZoom = (multiple, center = [104.5525, 39]) => {
    const dom = document.querySelector('#visualMap'),
      zoom = ((dom.offsetHeight * dom.offsetWidth) / (835 * 412)) * (multiple || 0.26) + 3;
    if (this.props?.viewMode === '2D') {
      visualMaps?.visualMap?.setCenter(center);
      visualMaps?.visualMap?.setZoom(zoom);
      visualMaps?.visualMap?.setZooms([3, 18]);
    } else if (this.props?.viewMode === '3D') {
      visualMaps3D?.visualMap?.setCenter(center);
      visualMaps3D?.visualMap?.setZooms([multiple, multiple]);
      visualMaps3D?.visualMap?.setZoom(multiple);
    }
  };

  monitorMqtt = (obj = {}) => {
    visualMaps.upDateMarker(obj);
  };

  componentWillUnmount() {
    if (this.props?.viewMode === '2D') {
      visualMaps?.destroy();
    } else if (this.props?.viewMode === '3D') {
      visualMaps3D.offAllEmitter();
      visualMaps3D.destroy();
    }
  }

  render() {
    const { isShowVisualMap } = this.state;

    return isShowVisualMap ? (
      <div
        id="visualMap"
        className={`${styles.visualMap} ${this.props?.isBasics ? styles.basicsVisualMap : ''}`}
        ref={this.visualMapRef}
      />
    ) : (
      <div className={styles.empty}>
        <Empty imageStyle={{ height: '150px' }} image={dark_error} description="地图加载失败" />
        <Button
          onClick={() =>
            OnLoadAmap(
              {
                plugins: [
                  'AMap.MarkerClusterer',
                  'AMap.DistrictSearch',
                  'AMap.Polygon',
                  'AMap.Object3DLayer',
                  'AMap.Object3D',
                  'AMap.DistrictLayer',
                ],
              },
              this.onLoad.bind(this),
            )
          }
          ghost={true}
          type="primary"
          shape="round"
          className={styles.empty_refresh}
        >
          重新加载
          <i className={styles.empty_refresh_icon} />
        </Button>
      </div>
    );
  }
}

VisualMap.propTypes = {
  viewMode: PropTypes.string,
};
export default VisualMap;
